<template>
  <div class="coupon-view">
    <NavBar title="优惠券"></NavBar>
    <div class="divide"><span>您有 3 张优惠券可用</span></div>
    <div class="wrapper" ref="wrapper">
      <ul class="content">
        <li>
          <Coupon :used="false" date="2020-7-14" num="9" />
        </li>
        <li>
          <Coupon :used="false" />
        </li>
        <li>
          <Coupon :used="false" />
        </li>
        <li>
          <Coupon date="2020-7-14" />
        </li>
        <li>
          <Coupon date="2020-7-12" />
        </li>
        <li>
          <Coupon date="2020-7-11" />
        </li>
        <li>
          <Coupon date="2020-7-9" />
        </li>
        <li>
          <Coupon date="2020-7-2" />
        </li>
      </ul>
    </div>
    <div class="bottom" @click="buy">去购票</div>
  </div>
</template>

<script>
import Coupon from '@/components/Coupon.vue'
import NavBar from '@/components/NavBar.vue'
import BScroll from '@better-scroll/core'

export default {
  components: {
    Coupon,
    NavBar,
  },

  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {})
    })
  },

  methods: {
    buy() {
      this.$router.push({ name: 'detail' })
    },
  },
}
</script>

<style lang="scss" scoped>
.coupon-view {
  height: 100vh;
  overflow: auto;
}
.divide {
  width: 762px;
  height: 60px;
  border: 1px gray;
  background: #2c2f36;
  margin-top: 40px;
  overflow: hidden;

  span {
    opacity: 0.59;
    font-size: 24px;
    line-height: 60px;
    color: #ffffff;
    margin-left: 40px;
  }
}
.wrapper {
  height: calc(100vh - 320px);
  margin-top: 28px;
  overflow: hidden;
  .content {
    .coupon {
      margin: 0 auto;
      margin-top: 28px;
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 762px;
  height: 140px;
  text-align: center;
  font-size: 36px;
  color: #ffffff;
  line-height: 140px;
  border: 1px;
  background-color: #2c2f36;
}
</style>
